<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="runView">
    <!-- 图元层 -->
    <div id="pelLayer">
      <!-- DIV图元 层    -->
      <template v-for="item in pels">
        <div class="div_layer" v-if="item.category === 'div'" v-html="item.htmls" :id="item.key"></div>
      </template>
      <!-- SVG图元 层    -->
      <svg class="svg_layer" preserveAspectRatio="xMinYMin meet" :width=pageWith :height=pageHeight :viewBox=viewBoxSize
        version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <template v-for="item in pels">
          <g v-if="item.category === 'svg'" v-html="item.htmls" :id="item.key"></g>
        </template>
      </svg>
    </div>

  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import * as d3 from "d3";
import { h, ref, reactive, computed, watch, onMounted } from "vue";
import axios from "axios";
import { useMessage } from 'naive-ui';
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onViewUpdataHtml,
  onViewSetPelData,//视图设置_图元数据
} from "./viewFunctions"

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useWorkStore } from "@/store/workStore"; // 工作数据

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const workStore = useWorkStore(); // 设备数据
const message = useMessage()// 消息
/* ================================================================================================ */
//                                数据 ★
/* ================================================================================================ */
/** 页面数据 */
let pageData = computed(() => workStore.pageData);
let pels = computed(() => workStore.pels);
/** 主页宽度 */
let pageWith = ref(0);
/** 主页高度 */
let pageHeight = ref(0);
/** 画布宽度 */
let canvasWidth = ref(0);
/** 画布高度 */
let canvasHeight = ref(0);
let viewBoxSize = ref('0 0 1024 1024')
/* ================================================================================================ */
//                                函数 ★
/* ================================================================================================ */
//

/**———————————————————————————————————————————————————————————————————————————————————————————————— */
//                                ★ 创建鼠标事件;初始化工作视图
/**———————————————————————————————————————————————————————————————————————————————————————————————— */
/** 初始化图元层 */
const initPelLayer = () => {
  // console.log("初始化图元层");
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 获取主页尺寸
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 主页宽度 */
  let homePageWith = d3.select('#homePage').style('width')
  pageWith.value = Number(homePageWith.replace(/px/g, ""))
  /** 主页高度 */
  let homePageHeight = d3.select('#homePage').style('height')
  pageHeight.value = Number(homePageHeight.replace(/px/g, ""))
  // console.log(`主页宽度==${pageWith.value };主页高度==${pageHeight.value };`);
  /** 画布宽度 */
  canvasWidth.value = Number(pageData.value.canvasAttr.canvasWidth);
  /** 画布高度 */
  canvasHeight.value = Number(pageData.value.canvasAttr.canvasHeight);
  // console.log(`画布宽度==${canvasWidth.value};画布高度==${canvasHeight.value};`);

  viewBoxSize.value = `0 0 ${canvasWidth.value} ${canvasHeight.value}`;

  // console.log(`缩放比例X==${scaleX};缩放比例Y==${scaleY};`);
  // 设置工作视图背景颜色
  d3.select('#pelLayer')
    .style('background-color', pageData.value.canvasAttr.canvasBackColor)
    ;

  // 视图更新
  onViewUpdataHtml();
  //创建鼠标事件
  onViewCreatMouseEvent();
  //数据扫描
  onDataScan();
};

/** 创建鼠标事件 */
const onViewCreatMouseEvent = () => {
  // console.log("创建鼠标事件");

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 数据转储
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 复制图元集 */
  let copyPels = workStore.pels

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 遍历图元数据
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  for (let index = 0; index < copyPels.length; index++) {
    // console.log("遍历图元数据");
    /** 图元Id */
    let pelId = String(copyPels[index].key);
    /** 事件集*/
    let events = copyPels[index].events;

    d3.select(`#${pelId}`)
      .data([events])

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 01-鼠标移到元素上
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      .on("mouseover", (e: any, i: any) => {
        // console.log(i)
        if (i.mouseover.enable) {
          // console.log("鼠标移到元素上")

          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mouseover.opt_send_set === 1) && (i.mouseover.link_key !== 'none')) {
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.mouseover.opt_send_type === 1) {
              onViewSetPelData(i.mouseover.link_key, i.mouseover.send_text);
              onViewUpdataHtml();
            }
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.mouseover.opt_send_type === 2) {
              onViewSetPelData(i.mouseover.link_key, i.mouseover.send_colour);
              onViewUpdataHtml();
            }
          }
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mouseover.opt_send_set === 2) && (i.mouseover.link_key !== 'none')) {
            /** 发送数据类型:1_文本*/
            if (i.mouseover.opt_send_type === 1) {
              workStore.sendBuffer.push({
                /** 链接变量 */
                link_key: i.mouseover.link_key,
                /** 发送文本*/
                val: i.mouseover.send_text
              })
            }
          }
        }
      })

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 02-鼠标从元素上移开
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      .on("mouseout", (e: any, i: any) => {
        // console.log(i)
        if (i.mouseout.enable) {
          // console.log("鼠标从元素上移开")
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mouseout.opt_send_set === 1) && (i.mouseout.link_key !== 'none')) {
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.mouseout.opt_send_type === 1) {
              onViewSetPelData(i.mouseout.link_key, i.mouseout.send_text);
              onViewUpdataHtml();
            }
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.mouseout.opt_send_type === 2) {
              onViewSetPelData(i.mouseout.link_key, i.mouseout.send_colour);
              onViewUpdataHtml();
            }
          }
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mouseout.opt_send_set === 2) && (i.mouseout.link_key !== 'none')) {
            /** 发送数据类型:1_文本*/
            if (i.mouseout.opt_send_type === 1) {
              workStore.sendBuffer.push({
                /** 链接变量 */
                link_key: i.mouseout.link_key,
                /** 发送文本*/
                val: i.mouseout.send_text
              })
            }
          }
        }
      })

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 03-鼠标按下
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      .on("mousedown", (e: any, i: any) => {
        // console.log(i)
        if (events.mousedown.enable) {
          // console.log("鼠标按下")
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mousedown.opt_send_set === 1) && (i.mousedown.link_key !== 'none')) {
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.mousedown.opt_send_type === 1) {
              onViewSetPelData(i.mousedown.link_key, i.mousedown.send_text);
              onViewUpdataHtml();
            }
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.mousedown.opt_send_type === 2) {
              onViewSetPelData(i.mousedown.link_key, i.mousedown.send_colour);
              onViewUpdataHtml();
            }
          }
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mousedown.opt_send_set === 2) && (i.mousedown.link_key !== 'none')) {
            /** 发送数据类型:1_文本*/
            if (i.mousedown.opt_send_type === 1) {
              workStore.sendBuffer.push({
                /** 链接变量 */
                link_key: i.mousedown.link_key,
                /** 发送文本*/
                val: i.mousedown.send_text
              })
            }
          }
        }
      })

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 04-鼠标抬起
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      .on("mouseup", (e: any, i: any) => {
        if (i.mouseup.enable) {
          // console.log("鼠标抬起")
          // console.log(i)
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mouseup.opt_send_set === 1) && (i.mouseup.link_key !== 'none')) {
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.mouseup.opt_send_type === 1) {
              onViewSetPelData(i.mouseup.link_key, i.mouseup.send_text);
              onViewUpdataHtml();
            }
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.mouseup.opt_send_type === 2) {
              onViewSetPelData(i.mouseup.link_key, i.mouseup.send_colour);
              onViewUpdataHtml();
            }
          }
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mouseup.opt_send_set === 2) && (i.mouseup.link_key !== 'none')) {
            /** 发送数据类型:1_文本*/
            if (i.mouseup.opt_send_type === 1) {
              workStore.sendBuffer.push({
                /** 链接变量 */
                link_key: i.mouseup.link_key,
                /** 发送文本*/
                val: i.mouseup.send_text
              })
            }
          }
        }
      })

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 05-鼠标双击
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      .on("dblclick", (e: any, i: any) => {
        // console.log(i)
        if (i.dblclick.enable) {
          // console.log("鼠标双击")
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.dblclick.opt_send_set === 1) && (i.dblclick.link_key !== 'none')) {
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.dblclick.opt_send_type === 1) {
              onViewSetPelData(i.dblclick.link_key, i.dblclick.send_text);
              onViewUpdataHtml();
            }
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.dblclick.opt_send_type === 2) {
              onViewSetPelData(i.dblclick.link_key, i.dblclick.send_colour);
              onViewUpdataHtml();
            }
          }
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.dblclick.opt_send_set === 2) && (i.dblclick.link_key !== 'none')) {
            /** 发送数据类型:1_文本*/
            if (i.dblclick.opt_send_type === 1) {
              workStore.sendBuffer.push({
                /** 链接变量 */
                link_key: i.dblclick.link_key,
                /** 发送文本*/
                val: i.dblclick.send_text
              })
            }
          }
        }
      });

  }
};

/** 数据扫描 */
const onDataScan = () => {
  // console.log("数据扫描");
  // 开启定时
  var timer = setInterval(function () {
    // console.log("数据扫描");
    for (let index = 0; index < workStore.pelData.length; index++) {
      /** 图元数据项*/
      const pelDataItem = workStore.pelData[index];
      /** 图元数据值 */
      let pelDataVal = pelDataItem.pelDataVal;
      /** 图元数据id */
      let pelDataId = String(pelDataItem.pelDataId);
      /** 设备id */
      let equipDataId = String(pelDataItem.equipDataId);

      if (equipDataId !== 'none') {
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 🐸 Post请求数据数据
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // console.log("Post请求数据数据");
        axios({
          url: `/api/HCIOT?query=getValById&Id=${equipDataId}`,
          method: "post",
        })
          .then((response: any) => {
            if (response.status === 200) {
              // message.error("故障")
              // console.log(response.data);
            }
            else{
              message.error("故障")
            }
          })
      }
    }
  }, 1000)

};

/* ================================================================================================ */
//                                ★ 钩子函数_挂载后
/* ================================================================================================ */
onMounted(() => {
  // console.log("钩子函数_挂载后")
  initPelLayer();//初始化图元层
});
/* ================================================================================================ */
//                               ★监听
/* ================================================================================================ */
// //监听-页面数据
// watch(
// () => pageData,
// () => {
//  // console.log("监听-图元数据");
//   // 视图更新
//   onViewUpdataHtml();
// },
// { deep: true }
// );

</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";

.runView {
  position: relative;
}

#pelLayer {
  position: absolute;
  top: 0px;
  left: 0px;
}
</style>
